<template>
  <div class="layout" :class="[setTheme == 1 ? 'blue' : 'red']">
    <!-- 投诉反馈弹窗 -->
    <el-dialog
      :title="$t('langName.langName65')"
      :visible.sync="dialogFeedbackVisible"
      width="30%"
      @close="handleCacleFeed"
    >
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane :label="$t('langName.langName65')" name="first">
          <el-form :rules="loginRules" :model="userForm" ref="ruleForm">
            <el-form-item prop="problemType" class="login-item">
              <el-select
                v-model="userForm.problemType"
                :placeholder="$t('langName.langName66')"
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.typename"
                  :value="item.typecode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- contactDetails -->
            <el-form-item prop="lineName" class="login-item">
              <el-input
                v-model="userForm.lineName"
                type="text"
                autp-complete="off"
                :placeholder="$t('langName.langName67')"
              >
              </el-input>
            </el-form-item>
            <!-- <el-form-item prop="contactDetails" class="login-item">
              <el-input
                v-model="userForm.contactDetails"
                type="text"
                autp-complete="off"
                :placeholder="$t('langName.langName70')"
              >
              </el-input>
            </el-form-item> -->
            <el-form-item prop="telephoneNumber" class="login-item">
              <el-input
                v-model="userForm.telephoneNumber"
                type="text"
                autp-complete="off"
                :placeholder="$t('langName.langName88')"
              >
              </el-input>
            </el-form-item>
            <el-form-item prop="email" class="login-item">
              <el-input
                v-model="userForm.email"
                type="text"
                autp-complete="off"
                :placeholder="$t('langName.langName89')"
              >
              </el-input>
            </el-form-item>
            <el-form-item prop="problemDesc" class="login-item">
              <el-input
                type="textarea"
                :rows="4"
                :placeholder="$t('langName.langName68')"
                v-model="userForm.problemDesc"
              >
              </el-input>
            </el-form-item>

            <el-form-item class="login-item" style="position: relative">
              <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                :limit="4"
                :file-list="fileList"
                :on-change="getFile"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane :label="$t('langName.langName77')" name="second">
          <el-card class="box-card" v-if="feedList.length && isFeedList">
            <div class="box">
              <div class="feed-list" v-for="item in feedList" :key="item.id">
                <div class="title">
                  <div>
                    {{ item.problemType }}（<span>{{
                      item.status == 1
                        ? $t("langName.langName90")
                        : $t("langName.langName91")
                    }}</span
                    >）
                  </div>

                  <i
                    class="el-icon-delete cursor-pointer"
                    size="50"
                    @click="handleDel(item.id)"
                  ></i>
                </div>
                <div class="time">
                  {{ $dayjs(item.feedbackTime).format("YYYY-MM-DD hh:mm:ss") }}
                </div>
                <div class="content">
                  <div>{{ item.problemDes }}，{{ item.otherDes }}</div>
                  <div>
                    <el-image
                      class="feedImg"
                      :src="i"
                      alt=""
                      v-for="(i, index) in item.file"
                      :key="index"
                      :preview-src-list="item.file"
                    />
                  </div>
                </div>
              </div>
            </div>
          </el-card>
          <div
            class="del"
            @click="handleAllDel"
            v-if="feedList.length && isFeedList"
          >
            {{ $t("langName.langName78") }}
          </div>
          <div v-if="!feedList.length && isFeedList">
            <el-empty :description="$t('langName.langName76')"></el-empty>
          </div>
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCacleFeed" class="cacleBtn">{{
          $t("langName.langName19")
        }}</el-button>
        <el-button
          :type="setTheme == 1 ? 'primary' : 'danger'"
          v-if="activeName == 'first'"
          @click="handleAddFeedback('ruleForm')"
          >{{ $t("langName.langName69") }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import maplist from "@/components/map";
import {
  getProblemType,
  addFeedback,
  getFeedbackLists,
  delFeedback,
} from "@/api/collect";
import { getBase64 } from "@/utils/location";
import { mapState } from "vuex";
export default {
  components: {
    maplist,
  },
  computed: {
    ...mapState(["changeSize", "changeTheme"]),
  },
  props: ["isFeedBack"],
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,

      userForm: {
        problemType: "",
        lineName: "",
        problemDesc: "",
        // contactDetails: "",
        telephoneNumber: "",
        email: "",
        imageUrl: ''
      },

      dialogFeedbackVisible: false,
      file: {},
      fileList: [],
      loginRules: {
        problemType: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("langName.langName84"),
          },
        ],
        lineName: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("langName.langName50"),
          },
        ],
        problemDesc: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("langName.langName116"),
          },
        ],
        telephoneNumber: [
          {
            required: true,
            message: this.$t("langName.langName88"),
            trigger: "change",
          },
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: this.$t("langName.langName92"),
          },
        ],
        email: [
          {
            required: true,
            message: this.$t("langName.langName89"),
            trigger: "change",
          },
          {
            type: "email",
            message: this.$t("langName.langName93"),
            trigger: ["blur", "change"],
          },
        ],
      },
      typeList: [],
      imgList: [],
      setTheme: "",
      activeName: "first",
      feedList: [],
      isFeedList: false,
    };
  },
  watch: {
    isFeedBack(newVal) {
      this.activeName = "first";
      this.userForm = {
        problemType: "",
        lineName: "",
        problemDesc: "",
        // contactDetails: "",
        telephoneNumber: "",
        email: "",
      };

      this.fileList = [];
      this.imgList = [];
      this.dialogFeedbackVisible = newVal;
      this.getProblemType();
      this.getFeedbackLists();
    },
    changeTheme(newVal) {
      this.setTheme = newVal;
    },
  },
  created() {
    this.setTheme = localStorage.getItem("setTheme")
      ? localStorage.getItem("setTheme")
      : "1";

    this.dialogFeedbackVisible = this.isFeedBack;
    if (this.dialogFeedbackVisible) {
      this.getProblemType();
      this.getFeedbackLists();
    }
  },
  methods: {
    //限制文件上传为图片
    beforeAvatarUpload(file) {
      const isJPG = file.raw.type === 'image/jpeg';
      const isLt2M = file.raw.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/png 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleClick() {
      if (this.activeName == "second") {
        this.getFeedbackLists();
      }
    },

    // 获取问题类型列表
    async getProblemType() {
      let params = localStorage.getItem("userId");
      let { status, data } = await getProblemType(params);
      if (status == 200) {
        this.typeList = data;
      }
    },

    // 上传头像获取头像地址
    getFile(file, fileList) {
      this.isDefaultAvatar = false;
      getBase64(file.raw).then((res) => {
        this.imgList.push(res);
      });
      this.fileList = fileList;
      console.log(fileList);
      const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png' || file.raw.type === 'image/jpg';
      const isLt2M = file.raw.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        this.fileList.pop()
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
        this.fileList.pop()
      }
      return isJPG && isLt2M;
    },
    // 图片放大
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 图片删除
    handleRemove(file, fileList) {
      let suoyin;
      this.fileList = this.fileList.filter((item, index) => {
        if (item.uid != file.uid) {
          return item;
        } else {
          suoyin = index;
        }
      });
      this.imgList.splice(suoyin, 1);
    },
    // 提交反馈
    async handleAddFeedback(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let { problemType, lineName, problemDesc, telephoneNumber, email } =
            this.userForm;
          let params = {
            userId: localStorage.getItem("userId"),
            problemType: problemType, //反馈类型
            problemDes: lineName, //反馈的车辆线路及运行方向
            otherDes: problemDesc, //反馈的具体信息
            feedbackTime: this.$dayjs(Date.now()).format("YYYY-MM-DD hh:mm:ss"),
            feedbackImage: this.imgList, //反馈的图片,可以不传
            // contactDetails: contactDetails,
            telephoneNumber: telephoneNumber,
            email: email,
          };
          let { status, message } = await addFeedback(params);
          if (status == 200) {
            this.$message.success(this.$t("langName.langName83"));
            this.handleCacleFeed();
          } else {
            this.$message.error(message);
          }
        }
      });
    },
    // 获取反馈列表
    async getFeedbackLists() {
      let params = localStorage.getItem("userId");
      let { status, data } = await getFeedbackLists(params);
      if (status == 200) {
        this.feedList = data;
        this.isFeedList = true;
      }
    },
    // 删除单条反馈列表记录
    async handleDel(id) {
      let option = {};
      if (this.setTheme == 1) {
        option = {
          confirmButtonText: this.$t("langName.langName79"),
          cancelButtonText: this.$t("langName.langName80"),
          confirmButtonClass: "blueBtn",
          type: "warning",
        };
      } else {
        option = {
          confirmButtonText: this.$t("langName.langName79"),
          cancelButtonText: this.$t("langName.langName80"),
          confirmButtonClass: "redBtn",
          cancelButtonClass: "cacleBtn",
          type: "warning",
        };
      }
      this.$confirm(this.$t("langName.langName81"), option).then(async () => {
        let { status, message } = await delFeedback([id]);
        if (status == 200) {
          this.$message.success(this.$t("langName.langName61"));
          this.getFeedbackLists();
        } else {
          this.$message.error(message);
        }
      });
    },
    // 删除全部反馈列表记录
    async handleAllDel() {
      this.$confirm(this.$t("langName.langName81"), {
        confirmButtonText: this.$t("langName.langName79"),
        cancelButtonText: this.$t("langName.langName80"),
        type: "warning",
      }).then(async () => {
        let arr = [];
        this.feedList.forEach((item) => {
          arr.push(item.id);
        });

        let { status, message } = await delFeedback(arr);
        if (status == 200) {
          this.$message.success(this.$t("langName.langName61"));
          this.getFeedbackLists();
        } else {
          this.$message.error(message);
        }
      });
    },
    // 关闭弹窗
    handleCacleFeed() {
      this.$refs.ruleForm.resetFields();
      this.$emit("handleCacleFeed");
    },
  },
};
</script>
<style lang="scss" scoped>
.el-color-picker__icon,
.el-input,
.el-textarea,
.el-select {
  width: 70%;
}
::v-deep .el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 100px;
}
.red ::v-deep .cacleBtn.el-button:focus,
.red ::v-deep .cacleBtn.el-button:hover {
  background: #ffd2d2;
  border: 1px solid #f7b0b0;
  color: #f78989;
}

.blue ::v-deep .cacleBtn.el-button:focus,
.blue ::v-deep .cacleBtn.el-button:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.feed-list {
  padding: 20px 0;
  border-bottom: 1px solid #ecf5ff;
  .title {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    // color: #b8b5b5;
    font-weight: 600;
  }
  .time {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 12px;
    color: #b8b5b5;
  }
  .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 10px;
  }
}
.feed-list:last-child {
  border-bottom: 1px solid transparent;
}
::v-deep .el-tabs__content {
  height: 550px;
}
.box {
  height: 430px;
  overflow: auto;
}
.box::-webkit-scrollbar {
  width: 0px;
}
::v-deep .el-card__body {
  padding-top: 0;
  padding-bottom: 0;
}

.feedImg {
  width: 80px;
  // height: 50px;
  margin-right: 10px;
  margin-top: 10px;
}
::v-deep .el-dialog {
  margin-top: 10vh !important;
}
.del {
  text-align: right;
  margin: 10px;
  color: #acacac;
  font-size: 12px;
  cursor: pointer;
}
.red ::v-deep .el-tabs__item:hover,
.red ::v-deep .el-tabs__item.is-active {
  color: #f78989;
}
.blue ::v-deep .el-tabs__item:hover,
.blue ::v-deep .el-tabs__item.is-active {
  color: #0156ff;
}
</style>

